<!--
 * @Author: fishroom
 * @Date: 2021-08-22 23:06:25
 * @LastEditTime: 2021-09-04 11:10:48
 * @FilePath: \backstage\src\views\property\Property.vue
-->
<template>
  <div class="Property home wrap">
    <img src="https://picsum.photos/id/190/1920/1080" alt="" class="g-img" />
    <inquire-view class="mar-top flex" />
    <div v-if="name == 'all'"><grid-box2 :list="list" /></div>
    <div v-if="name == 'hotel'"><grid-box :list="list" :title="t[0]" /></div>
    <div v-if="name == 'range'"><grid-box :list="list" :title="t[1]" /></div>
    <div v-if="name == 'farm'"><grid-box :list="list" :title="t[2]" /></div>
    <div v-if="name == 'barracks'"><grid-box :list="list" :title="t[3]" /></div>
    <div v-if="name == 'building'"><grid-box :list="list" :title="t[4]" /></div>
    <div class="flex grid-pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="len"
        :page-size="8"
        :current-page="currentPage"
        @current-change="sizeChange"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import GridBox from "components/content/reposeGrid/GridBox.vue";
import GridBox2 from "components/content/reposeGrid/GridBox2.vue";
import InquireView from "./InquireView.vue";
import { mapActions } from "vuex";
export default {
  components: { InquireView, GridBox, GridBox2 },
  name: "Property",
  data() {
    return {
      obj: {
        page: 1,
        limit: 8,
        token: this.to
      },
      arr: ["1", "2", "3", "4"],
      t: ["酒店", "靶场", "养殖场", "营房", "楼栋"],
      currentPage: 1
    };
  },
  methods: {
    ...mapActions([
      "getPropertySelect",
      "getPropertyItem",
      "getPropertyHotelItem",
      "getPropertyRangeItem",
      "getPropertyFarmItem",
      "getPropertyBarracksItem",
      "getPropertyBuildingItem"
    ]),
    sizeChange(val) {
      this.obj.page = val;
      this.$store.state.PropertyItemList = [];
      this.getPropertyItem(this.obj);
    }
  },
  created() {
    this.getPropertySelect();
    if (this.name == "all") {
      this.getPropertyItem(this.obj);
    } else if (this.name == "hotel") {
      this.getPropertyHotelItem(this.obj);
    } else if (this.name == "range") {
      this.getPropertyRangeItem(this.obj);
    } else if (this.name == "farm") {
      this.getPropertyFarmItem(this.obj);
    } else if (this.name == "barracks") {
      this.getPropertyBarracksItem(this.obj);
    } else if (this.name == "building") {
      this.getPropertyBuildingItem(this.obj);
    }
  },
  computed: {
    len() {
      return this.$store.state.PropertyLength;
    },
    name() {
      return this.$route.params.name;
    },
    to() {
      return JSON.parse(localStorage.getItem("token"));
    },
    list() {
      return this.$store.state.PropertyItemList;
    }
  }
};
</script>
<style lang="scss">
@import url("../../style/property.scss");
.g-img {
  width: 100%;
  height: 400px;
}

.Property {
  width: 1140px;
  padding-top: 59px;
}

.grid-pagination {
  padding: 20px 0;
  justify-content: flex-end;
}
</style>
